<template>
  <div class="list-wrap">
    <div class="search-view">

      <van-icon name="arrow-left" color="#E65D6E" size="20" @click="$router.back()"/>
      <van-search class="search-filed" ref="search" v-model="searchKey" placeholder="请输入搜索关键词" @input="onInput"
                  @search="onLoad"
                  autofocus/>
      <!-- 搜索提示-->
      <div class="search-pop" v-show="showPop" :style="popStyleObj">
        <div class="search-key-list">
          <div v-for="i in 10" :key="i" class="search-key-item">
            {{ i }}
            <van-divider/>
          </div>
        </div>

      </div>
    </div>
    <ul class="sort">
      <li class="sort-item sort-multiple">
        <van-popover
          v-model="showPopover"
          trigger="click"
          placement="bottom"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <span :class="{normal:selectText ==='',red:selectText!==''}">{{selectText===''?'综合':selectText}}</span>
          </template>
        </van-popover>
      </li>
      <li :class="{'sort-item':true,normal: !sales,red:sales}" @click="sortList">销量</li>
      <li class="sort-tag">
        <van-icon name="apps-o" size="20"/>
        <div class="divider"></div>

        <div class="filter-wrap">
          <span>筛选</span>
          <van-icon name="filter-o"/>
        </div>
      </li>
    </ul>
    <van-list
      v-model="loading"
      :finished="finished"
      :finishedText="finishedText"
      @load="onLoad">
      <item-list :list="list" @onItemClick="onItemClick"/>
    </van-list>

  </div>

</template>

<script>
import ProductList from '../../components/productList'
import {goodsList} from '../../api/items'
import ItemList from '../../components/ItemList'

export default {
  name: 'list',
  components: {ItemList, ProductList},
  data () {
    return {
      multiplePopObj: {
        position: 'absolute',
        top: '0px'
      },
      sales: false,
      selectText: '',
      showPopover: false,
      sort: '',
      order: '',
      actions: [
        {text: '综合', sort: '', order: 'desc'},
        {text: '销量', sort: 'sales', order: 'desc'},
        {text: '价格升序', sort: 'retail_price', order: 'asc'},
        {text: '价格降序', sort: 'retail_price', order: 'desc'}
      ],
      marginTop: 50,
      showPop: false,
      searchKey: '',
      loading: false,
      finished: false,
      immediateCheck: false,
      page: 1,
      list: [],
      finishedText: '没有更多了',
      popStyleObj: {
        top: '50px'
      }
    }
  },
  mounted () {
    this.$set(this.popStyleObj, 'top', this.$refs.search.offsetHeight + 10 + 'px')
    this.$set(this.multiplePopObj, 'top', this.$refs.multiple.offsetHeight + 'px')
  },
  methods: {
    sortList () {
      this.selectText = -1
      this.sales = !this.sales
    },
    onItemClick (item) {
      console.log(item)
      this.$router.push({name: 'detail', params: {id: item.id}})
    },
    onSelect (action) {
      this.selectText = action.text
      this.sort = action.sort
      this.order = action.order
    },
    onInput (text) {
      if (text != null && text !== '' && text !== 'undefined') {
        this.showPop = true
      } else {
        this.showPop = false
      }
    },
    onLoad () {
      console.log('===========this.$route.params.category=========')
      console.log(this.$route.params.category)
      console.log(this.$route.params)
      console.log('===========this.$route.params.category=========')
      this.loading = true
      this.page++
      goodsList({
        keyword: this.searchKey,
        page: this.page,
        categoryId: this.$route.params.category
      }).then(res => {
        this.loading = false
        let list = res.data.data.list
        list.forEach(item => {
          this.list.push(
            item
          )
        })
      })
    }
  }

}
</script>

<style scoped>
.search-view {
  position: relative;
  background: white;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.normal {
  color: black;
}

.red {
  color: #E65D6E;
}

.filter-wrap {
  margin: 0 10px;
}

.search-filed {
  flex: 1;
}

.divider {
  margin: 0 6px;
  background: #c5c5c5;
  width: 1px;
  height: 15px;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sort-multiple {
  position: relative;
}

.sort-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 5px 10px;
}

.sort-arrow {
  width: 30px;
  display: flex;
  flex-direction: column;
}

.sort-tag {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.sort {
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.list-wrap {
  height: 100%;
  overflow: scroll;
}

.search-pop {
  z-index: 2000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

}

.search-key-list {
  padding-top: 10px;
  position: absolute;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.search-key-item {
  padding: 0 12px;
}
</style>
